<template>
  <div class="detail">
    <detail-nav-bar
      :titles="titles"
      @backClick="backClick"
      @titleClick="titleClick"
      ref="navBar"
    />
    <scroll
      class="content"
      :pullUpLoad="true"
      ref="scroll"
      :probeType="3"
      @scroll="scroll"
    >
      <detail-swiper :topImages="topImages" />
      <detail-base-info :Goods="Goods" />
      <detail-shop-info :shop="Shop" />
      <detail-goods-info :detailInfo="detailInfo" @imageLoad="imageLoad" />
      <detail-param-info :paramInfo="itemParams" ref="param" />
      <detail-comment-info :commentInfo="commentInfo" ref="comment" />
      <goods-list :goodsList="recommend" ref="goodsList" />
    </scroll>
    <detail-bottom-bar @addToCart="addToCart" />
    <back-top
      class="back-top"
      v-if="isShowBackTop"
      @click.native="backTopClick"
    />
  </div>
</template>

<script>
// 网络请求相关
import { getDetail, getRecommend } from "network/detail";

// 组件相关
import DetailNavBar from "./childComps/DetailNavBar.vue";
import Swiper from "components/common/swiper/Swiper.vue";
import DetailSwiper from "./childComps/DetailSwiper.vue";
import Scroll from "components/common/scroll/Scroll.vue";
import DetailBaseInfo from "./childComps/DetailBaseInfo.vue";
import DetailShopInfo from "./childComps/DetailShopInfo.vue";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo.vue";
import DetailParamInfo from "./childComps/DetailParamInfo.vue";
import DetailCommentInfo from "./childComps/DetailCommentInfo.vue";
import DetailBottomBar from "./childComps/DetailBottomBar.vue";
import GoodsList from "components/content/goods/GoodsList.vue";

// qita
import { Goods, Shop } from "network/detail";
import { debounce } from "common/utils";
import { itemListenerMixin, backTop } from "common/mixin";
import { mapActions } from "vuex";
import Toast from "components/common/toast/Toast.vue";

export default {
  name: "Detail",
  mixins: [itemListenerMixin, backTop],
  data() {
    return {
      iid: "",
      titles: ["商品", "参数", "评论", "推荐"],
      topImages: [],
      Goods: {},
      Shop: {},
      detailInfo: {},
      itemParams: {},
      commentInfo: {},
      recommend: [],
      themeTopYs: [],
      getThemeTopY: null,
      currentIndex: 0,
    };
  },
  components: {
    DetailNavBar,
    Swiper,
    DetailSwiper,
    Scroll,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    GoodsList,
    DetailBottomBar,
    Toast,
  },
  created() {
    this.iid = this.$route.params.iid;
    // 获取数据
    this.getDetail();
    // 获取推荐数据
    this.getRecommend();
    // 获取themeTopYs的值，用防抖函数包装，防止多次改变themeTopYs赋值。
    this.getThemeTopY = debounce(() => {
      this.themeTopYs.push(0);
      this.themeTopYs.push(this.$refs.param.$el.offsetTop);
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
      this.themeTopYs.push(this.$refs.goodsList.$el.offsetTop);
      this.themeTopYs.push(Number.MAX_VALUE);
    }, 100);
  },
  methods: {
    ...mapActions(["addCart"]),
    // 获取详情数据
    getDetail() {
      getDetail(this.iid).then((res) => {
        // console.log(res);
        const data = res.result;
        this.topImages = data.itemInfo.topImages;
        this.Goods = new Goods(data.itemInfo, data.columns, data.services);
        this.Shop = new Shop(data.shopInfo);
        this.detailInfo = data.detailInfo;
        this.itemParams = data.itemParams;
        if (data.rate.cRate !== 0) {
          this.commentInfo = data.rate.list[0];
        }
      });
    },
    // 获取推荐数据
    getRecommend() {
      getRecommend().then((res) => {
        const data = res.data;
        this.recommend = data.list;
      });
    },
    // 返回上一级
    backClick() {
      this.$router.go(-1);
    },
    // 商品展示图片加载完后对better-scroll刷新
    imageLoad() {
      this.refresh();
      this.getThemeTopY();
    },
    scroll(position) {
      // 判断返回顶部图标是否显示
      if (-position.y > 1000) {
        this.isShowBackTop = true;
      } else {
        this.isShowBackTop = false;
      }
      //titiles根据内容变色
      let length = this.themeTopYs.length;
      for (let i = 0; i < length - 1; i++) {
        if (
          this.currentIndex !== i &&
          -position.y >= this.themeTopYs[i] &&
          -position.y < this.themeTopYs[i + 1]
        ) {
          this.currentIndex = i;
          this.$refs.navBar.currentIndex = this.currentIndex;
        }
      }
    },
    titleClick(index) {
      this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 300);
    },

    addToCart() {
      const product = {};
      product.image = this.topImages[0];
      product.title = this.Goods.title;
      product.desc = this.Goods.desc;
      product.price = this.Goods.realPrice;
      product.iid = this.iid;

      //  重构
      this.addCart(product).then((res) => {
        this.$toast.show(res, 1000);
      });

      // this.$store.dispatch(ADD_CART, product).then((res) => {
      //   console.log(res);
      // });
    },
  },
  mounted() {},
  destroyed() {
    this.$bus.$off("imgLoaded", this.itemImgListener);
  },
};
</script>

<style scoped>
.detail {
  position: relative;
  height: 100vh;
}
.content {
  position: relative;
  height: calc(100% - 44px - 49px);
  overflow: hidden;
  z-index: 1;
  background-color: #fff;
}
.back-top {
  position: absolute;
  right: 20px;
  bottom: 60px;
  z-index: 2;
}
</style>
